.box1{
	width: 100px;
	height: 100px;
	background: #6495ED;
	transition-property:height;
	transition-duration:3s;
	-webkit-transition-property:height;
	-webkit-transition-duration:3s;
}
.box1:hover{
	width: 100px;
	height: 500px;
}
.box2{
	position: relative;
	width: 100px;
	height: 200px;
	border:20px solid;
	border-image: url(../img/t01d58f738387492e70.jpg) 100 120 stretch;
	
    overflow: hidden;
    transition-property: width;
    transition-duration: 5s;
}
.box3{
	position: absolute;
	
	right: 0;
	width: 400px;
}
.box2:hover{
	height: 200px;
	width: 400px; 
}
.box4{
	width: 100px;
	height: 100px;
	background: #8A2BE2;
	transition-property:height,width;
	transition-duration:5s,10s;
	transition-timing-function: linear,ease;
}
.box4:hover{
	width: 500px;
	height: 500px;
	background: #A52A2A;
}
.box5{
	width: 100px;
	height: 100px;
	background: #98FB98;
	transition: 1s;
}
.box5:hover{
	transform: translate(200px,200px);
}
.box6{
	width: 100px;
	height: 100px;
	background: #92B901;
	transition: 1s;
}
.box6:hover{
	transform: translateX(200px);
}
table{
	 border-collapse: collapse;
}
table,td,th{
	width: 900px;
	height: 400px;
	border: 1px solid black;
	
}
td{
	vertical-align:top;
}
.p1{
	
	width: 100px;
	height: 100px;
	background: #92B901;
	transition: 1s;
	transform:rotate(180deg);
	transform:rotate(90deg);
}
.p1:hover{
	transform: translate(200px,200px);
	
}
.p2{
	width: 100px;
	height: 100px;
	background: #92B901;
	transition: 1s;	
	transform:rotate(90deg);
}
.p2:hover{
	transform: translate(100px,200px);
	
}
.p3{
	width: 100px;
	height: 100px;
	background: #92B901;
	transition: 1s;
}
.p3:hover{
	transform: scale(-0.2,-0.5);
}
.p4{
	width: 100px;
	height: 100px;
	background: #92B901;
	transition: 1s;
	margin-left: 150px;
	margin-top: 100px;
}
.p4:hover{
	transform: scale(2);
}
.box7{
	position: relative;
	width: 100px;
	height: 200px;
	margin-left: 500px;
	border:20px solid;
	border-image: url(../img/t01d58f738387492e70.jpg) 100 120 stretch;
	
    overflow: hidden;
    transition-property: width;
    transition-duration: 1s;
}
.box8{
	position: absolute;
	
	right: 0;
	width: 400px;
}
.box7:hover{
	height: 200px;
	width: 400px; 
	transform: scaleX(2);
}